<template>
	<TodoHeader @addTodo="addTodo" />
	<TodoMain :list="showList" @delTodo="delTodo" />
	<TodoFooter :status="status" :lastLength="lastLength" @updateStatus="updateStatus" />
	<button @click="onBack">返回</button>
</template>

<script>
	// 1导入	
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'

	export default {
		// 2注册 局部
		components: {
			TodoHeader,
			TodoMain,
			TodoFooter
		},
		data() {
			return {
				// 数据一般建议放在父组件,同样对数据的操作也是放在这里
				status: 'all', //all active completed
				list: [
					{ id: 1, name: '晨练', done: false, },
					{ id: 2, name: '练书法', done: true, },
				],

			}
		},
		computed: {
			lastLength() {
				return this.list.filter(item => !item.done).length
			},
			showList() {
				if (this.status === 'all') {
					return this.list;
				}
				if (this.status === 'active') {
					return this.list.filter(item => !item.done)
				}
				if (this.status === 'completed') {
					return this.list.filter(item => item.done)
				}
			}
		},
		methods: {
			addTodo(name) {
				this.list.push({
					name: name,
					done: false,
					id: ~~(Math.random() * 1000)
				})
			},
			delTodo(id) {
				this.list = this.list.filter(item => item.id != id)
			},
			updateStatus(status) {
				this.status = status
			},
			onBack() {
				this.$router.back()
			}
		}
	}
</script>
<style>
</style>